<template>
  <div>
    <van-nav-bar title="填写退货物流信息" left-arrow @click-left="onClickLeft" :border="false">
      <van-icon name="arrow-left" slot="left" color="#000" size="20" />
    </van-nav-bar>
    <div style="width:100%;height:10px;background-color:#F8F8F8"></div>
    <div class="c">
      <div class="c_item">
        <div class="c_1">
          <span class="c_5">*</span>
          <span class="c_3">物流公司：</span>
          <span class="c_7">{{this.expressName}}</span>
          <span class="c_4" v-if="this.expressName==''">必填</span>
        </div>
        <div class="c_2" @click="popup" ><span v-if="this.expressName==''">请选择</span>
          <van-icon name="arrow" class="icon" />
        </div>
      </div>
    </div>

    <div class="c">
      <div class="c_item">
        <div class="c_1">
          <span class="c_5">*</span>
          <span class="c_3">物流单号：</span>
          <span class="cc">
              <van-field v-model="expressSn" placeholder="必填" style="padding: 0 16px;"/>
          </span>
        </div>
      </div>
    </div>
    
    <div class="c">
      <div class="c_item">
        <div class="c_1">
          <span class="c_5">*</span>
          <span class="c_3">手机号码：</span>
          <span class="cc">
              <van-field v-model="refundMobile" placeholder="请填写手机号码" type="number" maxlength="11" style="padding: 0 16px;"/>
          </span>
        </div>
      </div>
    </div>
    <div class="c">
      <div class="c_item">
        <div class="c_1">
          <span class="c_3">备注说明：</span>
          <span class="cc">
              <van-field v-model="refundNote" placeholder="不超过200字" maxlength="200" style="padding: 0 16px;"/>
          </span>
        </div>
      </div>
    </div>
    <!-- <part4></part4> -->
    <div style="padding:20px">
      <div class="title" style="margin-bottom:10px;">
        上传凭证
        <span style="font-size:12px;color:#e5e5e5e;">(最多6张)</span>
      </div>
      <div class="imgList">
        <div v-for="(item,index) in imgList" class="imgContain" :key="index">
          <div class="clear" @click="delImg(index)">
            <img src="../../../../../static/img/lanhu/43.png" alt style="width: 13px;height: 13px;" />
          </div>
          <img :src="item" alt />
        </div>

        <div v-if="imgList.length < 6" @click="getImgUrl(imgList.length,6)" class="imgContain">
          <img src="../../../../../static/img/lanhu/87.png" alt />
        </div>
      </div>
    </div>

    <van-popup v-model="showReason1" position="bottom" :style="{ height: '100%' }">
      <van-nav-bar title="选择物流公司" left-arrow @click-left="close" :border="false">
      <van-icon name="arrow-left" slot="left" color="#000" size="20" />
      <van-icon name="ellipsis" slot="right" color="#000" size="20" />
    </van-nav-bar>
    <div style="width:100%;height:10px;background-color:#F8F8F8"></div>
      <div class="reason">
        <div class="reason_item" v-for="(item,index) in detailInfo" :key="index">
          <div>{{item.expressName}}</div>
          <div>
            <van-radio :name="item.expressId" checked-color="#ff6000" v-model="reason1" @click="select(item.expressCode,item.expressName)"></van-radio>
          </div>
        </div>
      </div>
      <div class="btn" @click="close">确定</div>
    </van-popup>

    <div class="btn" @click="submit">提交申请</div>
  </div>
</template>

<script>
import part1 from "_c/markets/refund/part1.vue";
import part2 from "_c/markets/refund/part2.vue";
import part3 from "_c/markets/refund/part3.vue";
import part4 from "_c/markets/refund/part4.vue";
import part5 from "_c/markets/refund/part5.vue";
import { getFun, getTimer } from "@/api/publicFun.js";
let publicFun = getFun();
export default {
  name: "orderDetail",
  components: {
    part1,
    part2,
    part3,
    part4,
    part5
  },
  data() {
    return {
        showReason1:false,
        reason1:'',
        radio:'',
        value:'',
        addressMobile:'' ,
        company:'',
        companyId:'',
        expressNo:'',
        detailInfo:[],
        refundId:'',//退款id，传过来       
        expressCode: '',//快递code
        expressId: '',//快递id
        expressName: '',//快递名称
        expressSn:'',//快递单号
        refundMobile:'',//手机号
        refundNote:'',//说明
        refundImage:'',//退款图片
        imgList: [], // 用于绑定已上传的图片数组（组件内部使用，在删除图片时用到）
        memberId:'',
        ordersId:'',
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    popup(){
        this.showReason1=true;
    },
    close(){
        this.showReason1=false;
    },
    getInfo(){
      let that=this
      let url=this.$api+'/marketorderservice/api/v1/market/orders/selectExpressList'
			let params={
        ordersId: this.ordersId,
        userId: this.userId,
				addressMobile:'' ,
        company:'',
        companyId:'',
        expressNo:'',
      }
		  this.$Axios.Post(url,{expressState:1}).then(function(res) {
        that.detailInfo=res.data;
      })
    },
    select(id,id1){
      this.expressCode = id;
      this.expressName = id1;
    },
    // 获取图片地址后的回调
    callJSGetImgUrl(str) {
      this.imgList = this.imgList.concat(str.split(","));
      this.refundImage = this.imgList.join();
    },
    // 删除图片
    delImg(index) {
      this.imgList.splice(index, 1);
      this.refundImage = this.imgList.join();
    },
    submit(){
      if(this.expressName==''){
	   	 	this.$toast('请选择物流公司')
	   	 	return false
	   	}
	   	if(!this.expressSn){
	   	 	this.$toast('请输入物流单号')
	   	 	return false	   	 	
	   	}
      let reg = /^[0-9a-zA-Z]+$/
	   	if(!reg.test(this.expressSn)){
	   	 	this.$toast('请输入正确的物流单号')
	   	 	return false	   	 	
      }
      let reg1 = /^1[3456789]\d{9}$/
      if(!reg1.test(this.refundMobile)){
	  		this.$toast('请输入正确的手机号');
	  		return false
	  	}
      let that=this
        let url2=this.$api+'/marketorderservice/api/v1/market/refund/send/update'
			  let params={
          expressCode: this.expressCode,//快递code
          expressSn: this.expressSn,//快递单号
				  memberId: this.userId,//
          refundId:this.refundId,//退款id
          refundImage:this.refundImage,//图片
          refundMobile:this.refundMobile,//手机
          refundNote:this.refundNote,//备注
			}
		  this.$Axios.Post(url2,params).then(function(res) {
        if(res.data.refundId!=null || res.data.refundId!=''){
          that.$toast("提交发货信息成功！")
          let arg='[{"userId":"'+that.userId+'"},{"refundId":"'+res.data.refundId+'"},{"ordersId":"'+that.ordersId+'"}]' 
	   	    that.link('/market/orders/refunds',arg)
        }
      })
    }
  },
  mixins: [publicFun], //混入
  mounted() {
    this.userId = this.$router.currentRoute.query.userId;
    this.refundId = this.$router.currentRoute.query.refundId;
    this.ordersId = this.$router.currentRoute.query.ordersId;
    this.getInfo();
    window.callJsGetLocation = this.callJsGetLocation; // 挂载获取地址回调方法
    window.callJSGetImgUrl = this.callJSGetImgUrl; // 挂载获取图片回调方法
  }
};
</script>

<style scoped="" lang="scss">
.c {
  padding: 15px;
  padding-bottom: 0px;
  background: #fff;
  /* margin-bottom: 10px; */
  border-bottom: 1px solid #f8f8f8;
}
.c1 {
  padding: 5px 15px;
  background: #fff;
  margin-bottom: 10px;
  border-bottom: 1px solid #f8f8f8;
}
.c11 {
  padding: 5px 15px;
  background: #fff;
}
.c_item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.c_item1 {
  justify-content: space-between;
  margin-bottom: 10px;
}
.c_1 {
  align-items: center;
  display: flex;
}
.c_3 {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  display:flex;
}
.c_31 {
  padding: 10px 0 0 0;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.c_4 {
  /* margin-left: 15px; */
  color: #aaa;
  display:flex;
  font-size:13px;
}
.c_7 {
  margin-left: 15px;
  font-size: 14px;
  /* font-weight: bold; */
  color: #333333;
  display:flex;
}
.cc{
  /* margin-left: 70px; */
  /* margin-top: -10px; */
  color: #aaa;
  display:flex;
  font-size:13px;
}
.icon {
  vertical-align: -2px;
}
.c_2 {
  color: #aaa;
  font-size: 14px;
}
.c_5 {
  font-size: 13px;
  color: #f22613;
}
.c_6 {
  padding-top: 10px;
  font-size: 12px;
  color: #999999;
}

.content {
  width: 90%;
  margin: 0 auto;
  border-bottom: 1px solid #e5e5e5;
}
.tit {
  padding: 5px;
}
.t_1 {
  font-size: 12px;
  padding: 5px;
  color: #333333;
  font-weight: bold;
}
.t_2 {
  padding: 5px 0 10px 5px;
  font-size: 12px;
  color: #999999;
}
.reason_title {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  padding: 20px;
  color: rgba(51, 51, 51, 1);
}
.reason {
  padding: 10px 10px 0 10px;
}
.reason_item {
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  margin-bottom: 10px;
}
.reason_item:nth-last-child(1) {
  border: none;
}
.btn {
  width: 100%;
  height: 40px;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  background-color: #ffd630;
  position: fixed;
  bottom: 0;
}
.imgList:after{content:"";display:block;clear:both;}
.imgList .imgContain{float: left;margin-right: 3%;width:23.5%;margin-bottom: 10px;position: relative;}
.imgList .imgContain img{width: 100%;height: 80px;}
.imgList .imgContain:nth-child(3n){margin-right: 0;}
</style>